<template>
  <h1>这是翟利辉的页面</h1>
  <to-do-header @addToDo="addToDo"></to-do-header>
  <to-do-main :list="showList" @delTodo="delTodo"></to-do-main>
  <to-do-footer :lastLength="lastLength" 
  :status="status"
   @updateStatus="updateStatus"
   >
  </to-do-footer>
</template>

<script setup>
import { computed, ref } from 'vue';
import ToDoHeader from './components/ToDoHeader.vue';
import ToDoMain from './components/ToDoMain.vue';
import ToDoFooter from './components/ToDoFooter.vue';
const list = ref([
  {id:1,name:"学习Vue3",done:"false"},
  {id:2,name:"跑步",done:"true" },
]);
function addToDo(name){
  if(name!=""){
    list.value.push({name,done:false,id:Math.floor(Math.random() * 100)});
  }
  else{
    alert("任务不能为空");
  }
}
function delTodo(id) {
  //filter bian li su zhu id!=item.id pop() shift()
  list.value=list.value.filter((item)=>item.id !=id);
}
const lastLength = computed(() => {
  return list.value.filter((item) => !item.done).length;
});
const status=ref("所有");
const showList = computed(() => {
  if(status.value=="所有") {
    return list.value;
  }
  if(status.value=="待办"){
  return list.value.filter(item=>!item.done);
  }
  if(status.value=="完成"){
    return list.value.filter((item) => item.done);
  }
});
function updateStatus(statuss) {
  status.value=statuss;
}
</script>

<style>

</style>